<template>
    <div class="modal-overlay" v-if="modelValue" @click.self="handleOutsideClick">
        <div class="modal-container" :style="{ width: width, maxWidth: '100%' }">
            <!-- 头部 -->
            <div class="modal-header" ref="modalHeaderRef">
                <div class="modal-title">{{ title }}</div>
            </div>

            <!-- 内容区域（可滚动） -->
            <div class="modal-body">
                <slot> </slot>
            </div>

            <!-- 底部按钮区域 -->
            <div class="modal-footer" v-if="$slots.footer">
                <slot name="footer"></slot>
            </div>
            <div class="modal-footer" v-else-if="showFooter">
                <a-button class="btn btn-cancel" @click="handleCancel">{{ cancelText }}</a-button>
                <a-button class="btn btn-confirm" @click="handleConfirm">{{ okText }}</a-button>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref, onMounted, onUnmounted } from 'vue';

    const props = defineProps({
        // 是否显示弹窗（使用v-model绑定）
        modelValue: {
            type: Boolean,
            default: false
        },
        // 弹窗标题
        title: {
            type: String,
            default: '提示'
        },
        // 弹窗宽度
        width: {
            type: String,
            default: '80%'
        },
        // 是否显示底部按钮
        showFooter: {
            type: Boolean,
            default: true
        },
        // 确认按钮文本
        okText: {
            type: String,
            default: '确定'
        },
        // 取消按钮文本
        cancelText: {
            type: String,
            default: '取消'
        },
        // 点击遮罩层是否关闭
        maskClosable: {
            type: Boolean,
            default: true
        },
        // 是否可拖拽
        draggable: {
            type: Boolean,
            default: false
        }
    });

    const emit = defineEmits(['update:modelValue', 'cancel', 'confirm']);

    // 弹窗头部引用，用于拖拽
    const modalHeaderRef = ref(null);

    // 关闭弹窗
    const handleClose = () => {
        emit('update:modelValue', false);
        emit('cancel');
    };

    // 取消
    const handleCancel = () => {
        emit('update:modelValue', false);
        emit('cancel');
    };

    // 确认
    const handleConfirm = () => {
        emit('confirm');
    };

    // 点击遮罩层
    const handleOutsideClick = () => {
        if (props.maskClosable) {
            handleClose();
        }
    };

    // 拖拽相关变量
    let isDragging = false;
    let startX = 0;
    let startY = 0;
    let startLeft = 0;
    let startTop = 0;
    let modalElement = null;

    // 开始拖拽
    const dragStart = (e) => {
        if (!props.draggable) return;

        // 获取鼠标事件，兼容移动端
        const event = e.touches ? e.touches[0] : e;
        isDragging = true;
        startX = event.clientX;
        startY = event.clientY;

        // 获取弹窗元素
        modalElement = modalHeaderRef.value.parentNode;
        const rect = modalElement.getBoundingClientRect();
        startLeft = rect.left;
        startTop = rect.top;

        // 添加拖拽过程中的事件监听
        document.addEventListener('mousemove', dragMove);
        document.addEventListener('touchmove', dragMove);
        document.addEventListener('mouseup', dragEnd);
        document.addEventListener('touchend', dragEnd);
    };

    // 拖拽过程
    const dragMove = (e) => {
        if (!isDragging) return;

        // 获取鼠标事件，兼容移动端
        const event = e.touches ? e.touches[0] : e;
        const deltaX = event.clientX - startX;
        const deltaY = event.clientY - startY;

        // 设置新位置
        modalElement.style.left = `${startLeft + deltaX}px`;
        modalElement.style.top = `${startTop + deltaY}px`;
    };

    // 结束拖拽
    const dragEnd = () => {
        isDragging = false;
        document.removeEventListener('mousemove', dragMove);
        document.removeEventListener('touchmove', dragMove);
        document.removeEventListener('mouseup', dragEnd);
        document.removeEventListener('touchend', dragEnd);
    };

    // 挂载时添加拖拽事件
    onMounted(() => {
        if (props.draggable && modalHeaderRef.value) {
            modalHeaderRef.value.addEventListener('mousedown', dragStart);
            modalHeaderRef.value.addEventListener('touchstart', dragStart);
        }
    });

    // 卸载时移除拖拽事件
    onUnmounted(() => {
        if (props.draggable && modalHeaderRef.value) {
            modalHeaderRef.value.removeEventListener('mousedown', dragStart);
            modalHeaderRef.value.removeEventListener('touchstart', dragStart);
        }
        document.removeEventListener('mousemove', dragMove);
        document.removeEventListener('touchmove', dragMove);
        document.removeEventListener('mouseup', dragEnd);
        document.removeEventListener('touchend', dragEnd);
    });
</script>

<style lang="scss" scoped>
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .modal-container {
        width: '80%';
        position: relative;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        display: flex;
        flex-direction: column;
        max-height: 80vh;
        border-radius: 12px;
        overflow: hidden;

        .modal-header {
            // padding: 16px 24px;
            padding: 19px 0 21px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: move;
            user-select: none;
            background: #1464d5;

            .modal-title {
                font-size: 16px;
                font-weight: 500;
                color: #fff;
            }

            .modal-close {
                cursor: pointer;
                color: #999;
                font-size: 22px;
                line-height: 22px;

                &:hover {
                    color: #1464d5;
                }
            }
        }

        .modal-body {
            padding: 30px;
            overflow-y: auto;
            flex: 1;
            max-height: calc(80vh - 120px); /* 减去头部和底部的高度 */

            /* 滚动条样式 */
            &::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }

            &::-webkit-scrollbar-thumb {
                background: #ccc;
                border-radius: 3px;
            }

            &::-webkit-scrollbar-track {
                background: #f1f1f1;
                border-radius: 3px;
            }
        }

        .modal-footer {
            padding: 11px 24px 21px;
            border-top: 1px solid #f0f0f0;
            display: flex;
            justify-content: center;
            gap: 8px;

            .btn {
                padding: 4px 15px;
                font-size: 14px;
                border-radius: 2px;
                cursor: pointer;
                transition: all 0.3s;
                outline: none;
                border-radius: 8px;

                &.btn-cancel {
                    background-color: #fff;
                    border: 1px solid #d9d9d9;
                    color: rgba(0, 0, 0, 0.85);

                    &:hover {
                        color: #1464d5;
                        border-color: #1464d5;
                    }
                }

                &.btn-confirm {
                    background-color: #1464d5;
                    border: 1px solid #1464d5;
                    color: #fff;

                    &:hover {
                        background-color: #4285f4;
                        border-color: #4285f4;
                    }
                }
            }
        }
    }
</style>
